---
layout: base.html
hook: "component-library"
---

{% include "partials/docs-header.html" %}

{% from 'components/hero.macro.html' import hero %}

{{ hero({
        title: "ESLint Docs Components",
        supporting_text: "Components used across this site."
    })
}}

<div class="content-container grid">
    <div class="span-1-3">
        <nav class="index">
            <button class="index__toggle" aria-label="Components" id="js-index-toggle" hidden>
                Components
                <svg width="20" height="20" viewBox="20 20 60 60">
                    <path id="ham-top" d="M30,37 L70,37 Z" stroke="currentColor"></path>
                    <path id="ham-middle" d="M30,50 L70,50 Z" stroke="currentColor"></path>
                    <path id="ham-bottom" d="M30,63 L70,63 Z" stroke="currentColor"></path>
                </svg>
            </button>
            <ul class="index__list" id="js-index-list">
                {% for item in collections.library %}
                <li class="index__item">
                    <a href="{{ item.url | url | prettyURL }}" {{ helpers.getLinkActiveState(item.url,
                    page.url) | safe }}>{{ item.data.title }}</a>
                </li>
                {% endfor %}
            </ul>
        </nav>
    </div>

    <div class="span-4-12">
        <main id="main" tabindex="-1" class="components-main">
            <h1>{{ title }}</h1>
            {{ content | safe }}
        </main>
    </div>
</div>

{% include "partials/site-footer.html" %}
